<template>
  <!-- 我的宠物 -->
  <view class="footer">
    <view class="footer_title">
      我的宠物
      <!-- <navigator hover-class="none" url="/subpkg/more/more">更多宠物</navigator> -->
    </view>

    <!-- 宠物 -->
    <scroll-view class="my_pet" scroll-x="true">
      <view class="my_pet_list" @click="navTo('/subpkg/ldentity/ldentity?id=' + item.id)"
        v-if="getRecordItem.length != 0" v-for="(item,i) in getRecordItem" :key="i">
        <view class="my_pet_list_text">
          <view class="my_pet_list_img">
            <image v-if="item.previewImage" :src="item.previewImage" mode="aspectFill"></image>
            <image v-else src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/a1b0aedabc466612a506a75eda513e72.png" mode="aspectFill"></image>
          </view>
          <view class="my_pet_list_title">
            <h1>{{item.productName}}</h1>
            <text>{{item.ageStr}}</text>
          </view>
        </view>
      </view>
      <view class="my_pet_item" v-if="getRecordItem.length == 0">
        <view class="my_pet_item_text">
          <image src="/static/images/mine/gerenno.png" mode="aspectFill"></image>
          <text>一个伙伴也没有 </text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: "user_maomao",
    data() {
      return {

      };
    },
    props: {
      getRecordItem: {
        type: Array,
        default: []
      },
      userId: {
        type: [Number, String],
        required: true
      }
    },
    computed: {
      ...mapGetters('m_user', ['userInfo'])
    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      }
    }
  }
</script>

<style lang="scss">
  .footer {
    /* height: 200px; */
    background-color: #fff;
    border-radius: 20rpx;
    // margin-top: 28rpx;
    padding: 0 24rpx 10rpx;
    box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);

    .border {
      border-bottom: 1px solid #F5F5F7;
    }

    .footer_title {
      display: flex;
      justify-content: space-between;
      font-size: 36rpx;
      height: 128rpx;
      line-height: 128rpx;
      font-weight: bold;

      navigator {
        font-size: 30rpx;
        color: rgba(61, 61, 61, 0.7);
        font-weight: normal;
      }
    }

    .my_pet {
      padding-bottom: 41rpx;
      height: 171rpx;
      display: flex;
      align-items: center;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;

      .my_pet_item {
        display: inline-block;
        width: 100%;
        height: 180rpx;
        box-sizing: border-box;

        .my_pet_item_text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100%;


          image {
            width: 184rpx;
            height: 108rpx;
          }

          text {
            font-size: 26rpx;
            margin-left: 12rpx;
            color: rgba(61, 61, 61, 0.6);
            margin-top: 10rpx;
          }
        }
      }

      .my_pet_list {
        display: inline-block;
        width: 317rpx;
        height: 160rpx;
        border-radius: 15rpx;
        border: 2rpx solid rgba(61, 61, 61, 0.1);
        margin-right: 20rpx;
        box-sizing: border-box;

        .my_pet_list_text {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;

          .my_pet_list_img {
            width: 94rpx;
            height: 94rpx;
            border-radius: 50%;
            margin-right: 17rpx;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .my_pet_list_title {

            h1 {
              font-size: 30rpx;
              width: 147rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            text {
              font-size: 22rpx;
              color: rgba(61, 61, 61, 0.6);
            }
          }
        }
      }
    }

    .footer_text {
      height: 106rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .footer_text_img {
        display: flex;
        align-items: center;
        font-size: 30rpx;

        image {
          width: 36rpx;
          height: 36rpx;
          margin-right: 25rpx;
        }
      }
    }
  }
</style>
